<!-- #layout name=default -->
<div id="main" class="with-button" v-cloak>
  <div class="page-header">
    <h1 class="title">HTML block</h1>
    <kb-multilang-selector
      v-if="multiLangs"
      :cultures="multiLangs.cultures"
      :default-culture="multiLangs.default"
    >
    </kb-multilang-selector>
  </div>
  <div class="row">
    <kb-form
      simple
      ref="htmlBlockForm"
      :model="htmlBlock"
      :rules="htmlBlockRules"
      class="col-md-10 col-md-offset-1 margin-bottom-25 form-horizontal"
    >
      <kb-form-item prop="name" class="form-group" >
        <template v-slot="error">
          <div :class="{'has-error': !!error.error}">
            <label class="control-label col-md-2">Name</label>
            <div class="col-md-10">
              <input
                v-if="isNewBlock"
                type="text"
                v-model="htmlBlock.name"
                class="input-large form-control"
                v-kb-tooltip:right.manual.error="error.error"
              />
              <label v-else class="control-label">{{ htmlBlock.name }}</label>
            </div>
          </div>
        </template>
      </kb-form-item>
      <div
        v-for="($data, $index) in contents"
        v-show="$data.show"
        class="form-group"
      >
        <label class="control-label col-md-2"
          >{{ Kooboo.text.common.Content + (isMultilingual ? ' (' + $data.abbr +
          ')' :'') }}</label
        >
        <div class="col-md-10">
          <textarea
            v-model="$data.value"
            v-kb-richeditor="richeditor"
            style="opacity: 0"
          ></textarea>
        </div>
      </div>
    </kb-form>
  </div>
  <div class="page-buttons">
    <button @click="onSubmit" class="btn green">Save</button>
    <a :href="cancelUrl" class="btn gray">Cancel</a>
  </div>
  <kb-media-dialog :data.sync="richeditor.mediaDialogData"></kb-media-dialog>
</div>

<script>
  (function() {
    Kooboo.loadJS([
      "/_Admin/Scripts/kooboo-web-editor/richEditor.min.js",
      "/_Admin/Scripts/components/tinymceMonaco/plugin.min.js",
      "/_Admin/Scripts/kooboo/Guid.js",
      "/_Admin/Scripts/components/kbMultilangSelector.js",
      "/_Admin/Scripts/components/kb-media-dialog.js",
      "/_Admin/Scripts/components/kbForm.js"
    ]);
  })();
</script>
<script src="/_Admin/View/Contents/HtmlBlock.js"></script>
